<template>
  <div>
    <header>
      <h1>新中国成立意义</h1>
    </header>
    <Sidebar></Sidebar>
    <nav>
      <ul>
        <li><a href="/">主页</a></li>
        <li><a href="/home2">首页</a></li>
        <li><a href="/prelude">新中国成立前奏</a></li>
        <li><a href="/founding">新中国成立经过</a></li>
      </ul>
    </nav>
    <SimpleCarousel></SimpleCarousel>
    <div class="timeline-container">
      <div class="timeline-item" v-for="(significance, index) in significanceList" :key="index">
        <div class="timeline-date">{{ significance.date }}</div>
        <div class="timeline-content significance-content">
          <h3 class="significance-title">{{ significance.title }}</h3>
          <ul>
            <li v-for="(point, i) in significance.points" :key="i" class="significance-point">{{ point }}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="person-card" v-for="(person, index) in importantPersons" :key="index">
      <img :src="person.image" alt="人物照片" />
      <div class="person-info">
        <h4>{{ person.name }}</h4>
        <p>{{ person.brief }}</p>
      </div>
    </div>
    <video controls autoplay width="800" height="600" src="/images/5031.mp4"></video>
    <div class="download-link">
      <a href="new_china_report.pdf" download>下载新中国成立研究报告</a>
      <a href="historical_documents.zip" download>下载相关历史文献</a>
    </div>
    <div class="comments-section">
      <h3>评论</h3>
      <textarea v-model="newComment" placeholder="写下你的评论"></textarea>
      <button @click="addComment">发布评论</button>
      <div class="comment" v-for="(comment, index) in comments" :key="index">
        <p>{{ comment.text }}</p>
        <button @click="likeComment(index)">点赞</button>
        <button @click="deleteComment(index)">删除</button>
        <span>{{ comment.likes }}</span>
      </div>
    </div>
    <button v-show="showBackToTop" @click="scrollToTop" class="back-to-top">回到顶部</button>
    <footer>
      &copy; 2024 新中国成立史网页版权所有
    </footer>
  </div>
</template>

<script>
import Sidebar from './Sidebar.vue';
import SimpleCarousel from './SimpleCarousel.vue';
export default {
  name: 'SignificanceView',
  components: {
    SimpleCarousel,
    Sidebar
  },
  data() {
    return {
      searchKeyword: '',
      significanceList: [
        {
          date: '历史意义',
          title: '新中国成立的伟大意义',
          points: [
            '新中国成立的意义非常深远，主要体现在以下几个方面：',
            '1. **国家独立与民族解放**：新中国的成立标志着中国从多年的战争和外来侵略中解放出来，结束了半殖民地半封建社会的状态，重塑了国家的独立与尊严。',
            '2. **社会制度变革**：新中国建立了社会主义制度，进行了一系列土地改革和社会经济的重大改革，为广大农民和工人解放了生产力，并促进了社会的公平与正义。',
            '3. **经济发展与现代化**：新中国以来，中国开展了多种形式的经济建设，逐步实现了从农业社会向工业社会的转型，推动了国家的现代化进程。',
            '4. **国际地位提升**：新中国的成立使中国重新回到国际舞台，积极参与国际事务，提升了国家的国际地位，并为世界和平与发展贡献了力量。',
            '5. **文化自信与民族团结**：新中国重视文化建设与民族团结，鼓励各民族共同发展，增强了民族自信心和向心力。',
            '总的来说，新中国成立是中国历史的重大转折点，开启了国家发展的新篇章，并对中国社会、经济、文化等各个方面产生了深远的影响。'
          ]
        }
      ],
      importantPersons: [
        {
          name: '毛泽东',
          image: '/images/5032.png',
          brief: '毛泽东（1893年－1976年）是中国共产党主要创始人之一，也是新中国的主要领导人。他在中国革命和建设中发挥了重要作用，领导了中国人民进行抗日战争和解放战争，最终于1949年宣布中华人民共和国成立。毛泽东提出的毛泽东思想在中国的政治、军事和经济方面产生了深远影响。他的政治理念和实践，对中国的社会主义建设及世界其他国家的革命运动也有重要启示。'
        },
        {
          name: '周恩来',
          image: '/images/5033.png',
          brief: '周恩来（1898年－1976年）是中国杰出的政治家和外交家，中华人民共和国的开国元勋之一。他是中国共产党重要的领导人之一，曾担任国务院总理，并在新中国成立后长期负责政府工作。周恩来在外交事务上表现出色，积极推动国家与世界各国的友好关系，促进了中国的国际地位提升。他以清廉、务实和高效的工作风格赢得了国内外的广泛赞誉，是中国现代历史上的重要人物之一。'
        },
         {
          name: '朱德',
          image: '/images/5034.png',
          brief: '朱德（1886年－1976年）是中国人民解放军的主要创始人之一，也是中华人民共和国的重要领导人之一。他出生于四川省，早年接受军事教育，曾参与辛亥革命和后来的北伐战争。在中国共产党成立后，朱德积极参与革命活动，参与组织和领导了工农红军，在长征中担任红军主力的指挥官。朱德与毛泽东等人密切合作，为中国共产党赢得了重要的军事胜利, 新中国成立后，朱德被任命为中央人民政府副主席和国防委员会主席。他在军事和国防建设中发挥了重要作用，推动了人民解放军的现代化建设。朱德以其坚定的革命精神和深厚的军事理论，使人民解放军在许多重要战斗中取得了胜利。'
        },
        {
          name: '刘少奇',
          image: '/images/5035.png',
          brief: '刘少奇（1890年－1969年）是中国共产党和中华人民共和国的重要领导人之一。他出生于湖南省，早年参与辛亥革命，并在北伐战争期间积极投身于革命活动。刘少奇在中国共产党内逐渐成长为一位重要的领导人物，担任过多项高级职务。在新中国成立后，刘少奇于1959年至1968年期间担任国家主席，并同时担任中共中央委员会主席。他在国家的政治、经济和社会发展中发挥了重要作用，特别是在推进国家工业化和农业合作化方面，实施了一系列政策和改革。刘少奇主张实事求是，重视经济建设，他在党的政治工作和基层组织建设方面也取得了一定成效。此外，他倡导加强党的纪律和干部队伍建设，努力推动教育和科学事业发展。'
        },
         {
          name: '邓小平',
          image: '/images/5036.png',
          brief: '邓小平（1904年－1997年）是中国的重要政治家和改革家，中华人民共和国的主要领导人之一。他出生于四川省，早年留学法国，参与了中国的工人运动和共产主义活动。邓小平在中国共产党内的地位逐渐上升，并在1950年代担任重要职务。在文化大革命期间，邓小平遭到批斗和政治迫害，但在1970年代初重新获得权力。1978年，他成为中国共产党中央委员会的核心领导，开展了一系列改革开放政策，推动中国经济的现代化和市场化。邓小平的改革开放政策包括农村土地承包制的推行、国有企业的改革和外资引入等，这些措施极大地促进了中国的经济增长，使中国走上了快速发展的道路。他提出了“建设有中国特色社会主义”的理论，为中国的发展提供了新的方向。邓小平还重视对外关系，推动中国与世界各国的交流与合作。他在国际上积极推动和平与发展的理念，为中国的国际地位提升做出了重要贡献。邓小平在中国现代历史中占据重要地位，他的政策和思想对中国的经济和社会变革产生了深远影响。'
        },
        {
          name: '陈云',
          image: '/images/5021.png',
          brief: '陈云（1905年－1995年）是中国共产党和中华人民共和国的重要领导人之一。他出生于上海，早年参与革命活动，并在1921年加入中国共产党。陈云在党内担任过多个重要职务，尤其在经济管理和政策制定方面发挥了重要作用。在新中国成立后，陈云被任命为中共中央政治局委员和中央财经委员会主席，主导国家的经济建设和发展。他强调计划经济的重要性，并参与制定了一系列经济政策，推动了国家的工业化和农业发展的进程。陈云在1950年代和1960年代的经济体制改革中发挥了关键作用，尤其是在“调整、巩固、充实、提高”方针下，推动了国民经济的恢复与发展。他提倡经济发展的实事求是，注重实际效果，强调在经济管理中要结合国情，反对盲目追求急功近利的做法。文化大革命期间，陈云曾遭到批斗，但在1976年后的恢复时期再次获得重要职务，并参与了国家的经济改革与现代化建设。陈云以其务实的经济思想和卓越的管理能力，为中国的经济发展做出了重要贡献，是党内受到广泛尊敬的领导人之一。'
        }
        // 更多人物数据
      ],
      newComment: '',
      comments: [],
      showBackToTop: false
    };
  },
  methods: {
    addComment() {
      if (this.newComment.trim()) {
        this.comments.push({ text: this.newComment, likes: 0 });
        this.newComment = '';
      }
    },
    likeComment(index) {
      this.comments[index].likes++;
    },
    deleteComment(index) {
      this.comments.splice(index, 1);
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior:'smooth'
      });
    },
    handleScroll() {
      this.showBackToTop = window.pageYOffset > 200;
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  }
};
</script>
<style scoped>
@import url('../CSS/main.css');
</style>
<style scoped>
body {
  background: linear-gradient(to bottom, #f8f8f8, #e8e8e8);
  font-family: Arial, sans-serif;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

nav {
  border-bottom: 2px solid #ccc;
}

nav ul li a {
  transition: all 0.3s ease;
}

nav ul li a:hover {
  transform: scale(1.1);
}

.carousel {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-item {
  flex: 0 0 100%;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.carousel-controls button {
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.timeline-container {
  margin: 20px;
}

.timeline-item {
  display: flex;
  align-items: start;
  margin-bottom: 20px;
}

.timeline-date {
  flex: 0 0 100px;
  font-weight: bold;
}

.timeline-content {
  flex: 1;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
}

.timeline-content ul {
  list-style-type: none;
  padding: 0;
}

.person-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin: 20px;
  padding: 10px;
}

.person-card img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 20px;
}

.person-info h4 {
  margin-top: 0;
  font-size: 14px;
}

.person-info p {
  font-size: 12px;
}

.download-link {
  margin: 20px;
}

.download-link a {
  display: block;
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  margin-bottom: 10px;
}

.download-link a:hover {
  background-color: #0056b3;
}

.comments-section {
  margin: 20px;
}

.comments-section textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
}

.comments-section button {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
}

.comment {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

main {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

main p {
  line-height: 1.8;
  text-indent: 20px;
}
.significance-content {
  flex: 1;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
}

.significance-title {
  text-align: left;
  color: #333; /* 标题颜色 */
  font-size: 18px;
}

.significance-point {
  text-align: left;
  color: #666; /* 内容颜色 */
  line-height: 1.5;
  margin-bottom: 5px;
}
footer {
  font-size: 12px;
  color: #888;
  text-align: center;
  margin-top: 20px;
}
</style>